<template>
    <div class="main">
        <a-form style="margin: 0 0 10px;" ref="formRef" :model="form" layout="inline" @submit="handlerSearch">
            <a-row :gutter="24">
                <a-form-item field="邮箱" label="邮箱" label-col-flex="auto" :label-col-style="{ width: '100px' }">
                    <a-input :style="{ width: '100%' }" placeholder="请输入邮箱" allow-clear v-model="form.phone" />
                </a-form-item>
            </a-row>
            <div class="text-center mt-5 w-full">
                <a-space size="medium">
                    <a-button type="primary" html-type="submit">
                        <template #icon><icon-search /></template>
                        搜索
                    </a-button>
                    <a-button type="outline" @click="export_click">

                        <template #icon><icon-download /></template>
                        导出
                    </a-button>
                </a-space>
            </div>
        </a-form>
        <a-table :columns="columns" :data="tableData" :pagination="pagination" @page-change="changePage"></a-table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { Ref } from "vue"
import request from '@/api/users'

const form: {
    phone: string
} = reactive({
    phone: ""
});

type RefArray<T> = Ref<Array<T>>;
const columns: RefArray<object> = ref([{
    title: 'ID',
    dataIndex: 'id',
    ellipsis: true,
    tooltip: true,
    fixed: 'left',
    align: "center"
},
{
    title: '邮箱',
    dataIndex: 'user.phone',
    align: "center"
},
{
    title: '类型',
    dataIndex: 'type_name',
    align: "center"
},
{
    title: '日期',
    dataIndex: 'created_at',
    align: "center"
},
{
    title: '之前',
    dataIndex: 'before',
    align: "center"
},
{
    title: '之后',
    dataIndex: 'after',
    align: "center"
},
{
    title: '数量',
    dataIndex: 'value',
    align: "center"
}]);
const tableData: RefArray<object> = ref([]);

interface pageTypes {
    total: number,
    current: number,
    pageSize: number,
    showTotal: boolean,
    showJumper: boolean
}
const pagination: pageTypes = reactive({
    total: 1,
    current: 1,
    pageSize: 50,
    showTotal: true,
    showJumper: true
});
const getList = async () => {
    let params = {
        ...form,
        page: pagination.current,
        pageSize: pagination.pageSize
    };
    const { data: { data, total } } = await request.get_log(params);
    tableData.value = data;
    pagination.total = total;
};
getList();
const changePage = (current: number) => {
    pagination.current = current;
    getList();
};

const handlerSearch = () => {
    pagination.current = 1;
    tableData.value = [];
    getList()
}
const export_click = async () => {
    await request.order_export(form);
};
</script>

<style scope lang="scss">
.main {
    width: 100%;
    padding: 20px;
    background: #fff;
}
</style>